<template>
	<div class="trainTime train">
		<trainHeader :name="trainNo + '次'"></trainHeader>
		<div class="trainTime_title">
			<div v-for="item in listDate">{{item}}</div>
		</div>
		<div class="trainTime_title active" v-for="item,key in list" :class="{trainTime_pass:item.pass || item.station == decodeURIComponent(fromStation) || item.station == decodeURIComponent(toStation)}">
			<div :class="{'trainTime_color': item.station == decodeURIComponent(fromStation) || item.station == decodeURIComponent(toStation)}">
				{{item.serialNumber}}
			</div>
			<div :class="{'trainTime_color': item.station == decodeURIComponent(fromStation) || item.station == decodeURIComponent(toStation)}">{{item.station}}</div>
			<div :class="{'trainTime_color': item.station == decodeURIComponent(toStation)}">
				<span v-if="!key">始发地</span>
				<span v-else>{{item.arrivalTime}}</span>
			</div>
			<div :class="{'trainTime_color': item.station == decodeURIComponent(fromStation)}">
				<span v-if="key == list.length-1">终点站</span>
				<span v-else>{{item.departureTime}}</span>
			</div>
			<div>{{item.stayTimeSpan}}</div>
		</div>
	</div>
</template>
<style scoped>
		
	.trainTime_title {
		/*padding: 0 34px;*/
		display: flex;
		justify-content: space-between;
		height: 65px;
		align-items: center;
		background-color: #F4F5F9;
		font-size: 26px;
		color: #8a8a8a;
	}
	
	.trainTime_title>div {
		width: 20%;
		text-align: center;
	}
	
	.trainTime_title.active {
		background-color: #fff;
		height: 78px;
	}
	
	.trainTime_color {
		color: #3bc3c2;
	}
	
	.trainTime_pass {
		color: #333;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	export default {
		name: "trainTime",
		components: {
			trainHeader
		},
		data() { //数据
			return {
				departureDate: "", //日期
				trainNo: "", //车次
				listDate: ["站次", "站名", "到达", "出发", "停留"],
				list: [],
				fromStation: "",
				toStation: "",
			}
		},
		mounted() {
			this.departureDate = this.$route.query.departureDate; //日期
			this.fromStation = this.$route.query.fromStation;
			this.toStation = this.$route.query.toStation;
			this.trainNo = this.$route.query.trainNo;
			this.getList();
		},
		created() {
			
		},
		methods: {
			clickReturn() {
				this.$router.go(-1);
			},
			getList() {
				this.$loading.show();
				var param = {
					fromStation: this.fromStation,
					toStation: this.toStation,
					trainDate: this.departureDate.replace(/-/g, ''),
					trainNo: this.trainNo
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/trainStopStation", param).then((res) => {
					this.$loading.hide();
					if (res.data.Result.stations) {
						var flag = false;
						res.data.Result.stations.forEach((item)=>{
							(item.station == res.data.Result.toStation) && (flag = false);
				            flag && (item.pass = true);
				            (item.station == res.data.Result.fromStation) && (flag = true);
						});
						this.list = res.data.Result.stations;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			}
		},
	};
</script>